import { ref } from 'vue'

export function useBlendModes(getCanvas) {
  const blendModes = [
    { label: '正常', value: 'source-over' },
    { label: '正片叠底', value: 'multiply' },
    { label: '滤色', value: 'screen' },
    { label: '叠加', value: 'overlay' },
    { label: '变暗', value: 'darken' },
    { label: '变亮', value: 'lighten' },
    { label: '颜色减淡', value: 'color-dodge' },
    { label: '颜色加深', value: 'color-burn' },
    { label: '强光', value: 'hard-light' },
    { label: '柔光', value: 'soft-light' },
    { label: '差值', value: 'difference' },
    { label: '排除', value: 'exclusion' },
    { label: '色相', value: 'hue' },
    { label: '饱和度', value: 'saturation' },
    { label: '颜色', value: 'color' },
    { label: '亮度', value: 'luminosity' }
  ]

  // 设置混合模式
  const setBlendMode = (mode) => {
    const fabricCanvas = getCanvas()
    if (!fabricCanvas) return

    const activeObject = fabricCanvas.getActiveObject()
    if (!activeObject) return

    activeObject.set('globalCompositeOperation', mode)
    fabricCanvas.renderAll()
  }

  // 设置图层不透明度
  const setOpacity = (opacity) => {
    const fabricCanvas = getCanvas()
    if (!fabricCanvas) return

    const activeObject = fabricCanvas.getActiveObject()
    if (!activeObject) return

    activeObject.set('opacity', opacity / 100)
    fabricCanvas.renderAll()
  }

  return {
    blendModes,
    setBlendMode,
    setOpacity
  }
} 